<!-- 页脚 -->
    <footer class="bg-ink text-rice py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <div class="w-10 h-10 rounded-full bg-cinnabar flex items-center justify-center">
                            <span class="text-rice font-kai text-xl">古</span>
                        </div>
                        <span class="text-xl font-song font-bold">古韵新境</span>
                    </div>
                    <p class="text-rice/70 mb-6">让古典文学活起来，用现代方式感受传统文化魅力</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-wechat text-xl"></i>
                        </a>
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-instagram text-xl"></i>
                        </a>
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-song font-bold mb-6">快速链接</h4>
                    <ul class="space-y-3">
                        <li><a href="<{spUrl c=main a=index}>" class="text-rice/70 hover:text-cinnabar transition-colors">首页</a></li>
                        <li><a href="<{spUrl c=main a=gushi}>" class="text-rice/70 hover:text-cinnabar transition-colors">诗境</a></li>
                        <li><a href="<{spUrl c=main a=classics}>" class="text-rice/70 hover:text-cinnabar transition-colors">典籍</a></li>
                        <li><a href="<{spUrl c=main a=guji}>" class="text-rice/70 hover:text-cinnabar transition-colors">古书</a></li>
                        <li><a href="<{spUrl c=main a=chengyu}>" class="text-rice/70 hover:text-cinnabar transition-colors">成语</a></li>
                        <li><a href="<{spUrl c=main a=zuoze}>" class="text-rice/70 hover:text-cinnabar transition-colors">创作</a></li>
                        <li><a href="<{spUrl c=main a=interactive}>" class="text-rice/70 hover:text-cinnabar transition-colors">互动体验</a></li>
                        <li><a href="<{spUrl c=main a=about}>" class="text-rice/70 hover:text-cinnabar transition-colors">关于我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-song font-bold mb-6">互动功能</h4>
                    <ul class="space-y-3">
                        <li><a href="soundscape.html" class="text-rice/70 hover:text-cinnabar transition-colors">声景体验</a></li>
                        <li><a href="painting.html" class="text-rice/70 hover:text-cinnabar transition-colors">诗画创作</a></li>
                        <li><a href="dialogue.html" class="text-rice/70 hover:text-cinnabar transition-colors">古今对话</a></li>
                        <li><a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">用户作品</a></li>
                        <li><a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">创作活动</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-song font-bold mb-6">联系我们</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-envelope-o mt-1 mr-3 text-cinnabar"></i>
                            <span class="text-rice/70">489683694@qq.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-phone mt-1 mr-3 text-cinnabar"></i>
                            <span class="text-rice/70">+86 15901057988</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3 text-cinnabar"></i>
                            <span class="text-rice/70">北京市顺义区馨港庄园二区16号</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-rice/20 pt-8 text-center text-rice/50 text-sm">
                <p>© 2023 古韵新境 - 古典文学革新平台 版权所有 | <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备16009769号</a></p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="back-to-top" class="fixed bottom-8 right-8 bg-cinnabar text-rice w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300 z-50">
        <i class="fa fa-arrow-up"></i>
    </button>

    <!-- 登录/注册模态框 -->
    <div id="auth-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
    <div class="absolute inset-0 bg-ink/70 backdrop-blur-sm" id="modal-overlay"></div>
    
    <div class="relative bg-paper rounded-2xl shadow-2xl w-full max-w-md mx-4 overflow-hidden transform transition-all">
        <!-- 关闭按钮 -->
        <button id="close-modal" class="absolute top-4 right-4 text-ink/50 hover:text-cinnabar transition-colors z-10">
        <i class="fa fa-times text-xl"></i>
        </button>
        
        <!-- 标签切换 -->
        <div class="flex border-b border-gray-200">
        <button id="login-tab" class="flex-1 py-4 font-song text-lg font-medium text-cinnabar border-b-2 border-cinnabar">登录</button>
        <button id="register-tab" class="flex-1 py-4 font-song text-lg font-medium text-ink/60 hover:text-ink transition-colors">注册</button>
        </div>
        
        <!-- 登录表单 -->
        <form id="login-form" class="p-6 md:p-8">
        <h3 class="text-xl font-song font-bold mb-6">欢迎回来</h3>
        
        <div class="space-y-4 mb-6">
            <div>
            <label for="login-email" class="block text-sm font-medium text-ink/80 mb-1">邮箱</label>
            <input type="email" name="login-email" id="login-email" 
                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-cinnabar focus:ring-2 focus:ring-cinnabar/20 outline-none transition-all"
                    placeholder="请输入您的邮箱">
            </div>
            
            <div>
            <div class="flex justify-between mb-1">
                <label for="login-password" class="block text-sm font-medium text-ink/80">密码</label>
                <a href="#" class="text-sm text-cinnabar hover:underline">忘记密码?</a>
            </div>
            <input type="password" name="login-password" id="login-password" 
                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-cinnabar focus:ring-2 focus:ring-cinnabar/20 outline-none transition-all"
                    placeholder="请输入您的密码">
            </div>
            
            <div class="flex items-center">
            <input type="checkbox" name="remember-me" id="remember-me" class="w-4 h-4 text-cinnabar rounded border-gray-300 focus:ring-cinnabar">
            <label for="remember-me" class="ml-2 text-sm text-ink/70">记住我</label>
            </div>
        </div>
       
        <button id="login-btn-ac" class="w-full bg-cinnabar text-rice font-song py-3 rounded-lg hover:bg-cinnabar/90 transition-all duration-300 mb-4">
            登录
        </button>
        
        <div class="text-center text-sm text-ink/60">
            还没有账号? <a href="#" id="switch-to-register" class="text-cinnabar hover:underline">立即注册</a>
        </div>
        
        <div class="my-6 flex items-center">
            <div class="flex-1 h-px bg-gray-200"></div>
            <span class="px-3 text-sm text-ink/50">或使用以下方式登录</span>
            <div class="flex-1 h-px bg-gray-200"></div>
        </div>
        
        <div class="flex justify-center space-x-4">
            <a href="#" class="w-10 h-10 rounded-full bg-[#E6162D] flex items-center justify-center text-rice hover:opacity-90 transition-all">
            <i class="fa fa-weibo"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-[#07C160] flex items-center justify-center text-rice hover:opacity-90 transition-all">
            <i class="fa fa-wechat"></i>
            </a>
        </div>
        </form> 
        <!-- 注册表单 -->
        <form id="register-form" class="p-6 md:p-8 hidden">
        <h3 class="text-xl font-song font-bold mb-6">创建账号</h3>
        
        <div class="space-y-4 mb-6">
            <div>
            <label for="register-name" class="block text-sm font-medium text-ink/80 mb-1">用户名</label>
            <input type="text" name="register-name" id="register-name" 
                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-cinnabar focus:ring-2 focus:ring-cinnabar/20 outline-none transition-all"
                    placeholder="请设置用户名">
            </div>
            
            <div>
            <label for="register-email" class="block text-sm font-medium text-ink/80 mb-1">邮箱</label>
            <input type="email" name="register-email" id="register-email" 
                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-cinnabar focus:ring-2 focus:ring-cinnabar/20 outline-none transition-all"
                    placeholder="请输入您的邮箱">
            </div>
            
            <div>
            <label for="register-password" class="block text-sm font-medium text-ink/80 mb-1">密码</label>
            <input type="password" name="register-password" id="register-password" 
                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-cinnabar focus:ring-2 focus:ring-cinnabar/20 outline-none transition-all"
                    placeholder="请设置密码（至少8位）">
            </div>
            
            <div>
            <label for="register-confirm" class="block text-sm font-medium text-ink/80 mb-1">确认密码</label>
            <input type="password" name="register-confirm" id="register-confirm" 
                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-cinnabar focus:ring-2 focus:ring-cinnabar/20 outline-none transition-all"
                    placeholder="请再次输入密码">
            </div>
        </div>
        
        <button id="register-btn-ac" class="w-full bg-cinnabar text-rice font-song py-3 rounded-lg hover:bg-cinnabar/90 transition-all duration-300 mb-4">
            注册
        </button>
        
        <div class="text-center text-sm text-ink/60">
            已有账号? <a href="#" id="switch-to-login" class="text-cinnabar hover:underline">立即登录</a>
        </div>
        
        <p class="text-xs text-ink/50 text-center mt-4">
            点击注册即表示您同意我们的<a href="#" class="text-cinnabar hover:underline">服务条款</a>和<a href="#" class="text-cinnabar hover:underline">隐私政策</a>
        </p>
        </form>
    </div>
    </div>
    <div id="toast" class="fixed top-8 left-1/2 transform -translate-x-1/2 z-50 px-6 py-3 rounded-lg shadow-lg transition-all duration-300 opacity-0 invisible"></div>

    <!-- JavaScript -->
    <script>
    // 自定义提示框函数
    function showToast(message, isError = false) {
        const toast = document.getElementById('toast');
        toast.textContent = message;
        toast.className = 'fixed top-8 left-1/2 transform -translate-x-1/2 z-50 px-6 py-3 rounded-lg shadow-lg transition-all duration-300';
        
        // 设置样式
        if (isError) {
            toast.classList.add('bg-red-100', 'text-red-800', 'border', 'border-red-200');
        } else {
            toast.classList.add('bg-green-100', 'text-green-800', 'border', 'border-green-200');
        }
        
        // 显示提示
        toast.classList.remove('opacity-0', 'invisible');
        toast.classList.add('opacity-100', 'visible');
        
        // 3秒后自动隐藏
        setTimeout(() => {
            toast.classList.remove('opacity-100', 'visible');
            toast.classList.add('opacity-0', 'invisible');
        }, 3000);
    }

    // 导航栏滚动效果
    $(window).scroll(function() {
        const nav = $('#main-nav');
        if ($(window).scrollTop() > 50) {
            nav.addClass('nav-scrolled');
        } else {
            nav.removeClass('nav-scrolled');
        }
        
        // 回到顶部按钮显示/隐藏
        const backToTop = $('#back-to-top');
        if ($(window).scrollTop() > 300) {
            backToTop.removeClass('opacity-0 invisible').addClass('opacity-100 visible');
        } else {
            backToTop.removeClass('opacity-100 visible').addClass('opacity-0 invisible');
        }
        
        // 滚动显示动画
        $('.scroll-reveal').each(function() {
            const revealTop = $(this).offset().top;
            const windowHeight = $(window).height();
            const scrollTop = $(window).scrollTop();
            
            if (revealTop < scrollTop + windowHeight - 100) {
                $(this).addClass('active');
            }
        });
    });
    
    // 移动端菜单切换
    $('#menu-toggle').click(function() {
        $('#mobile-menu').toggleClass('hidden');
        $(this).find('i').toggleClass('fa-bars fa-times');
    });
    
    // 回到顶部功能
    $('#back-to-top').click(function() {
        $('html, body').animate({ scrollTop: 0 }, 600);
    });
    
    // 页面加载时触发一次滚动检查
    $(window).trigger('scroll');

    // 登录注册功能实现
    document.addEventListener('DOMContentLoaded', function() {
        // 获取元素
        const authModal = document.getElementById('auth-modal');
        const modalOverlay = document.getElementById('modal-overlay');
        const closeModal = document.getElementById('close-modal');
        const loginTab = document.getElementById('login-tab');
        const registerTab = document.getElementById('register-tab');
        const loginForm = document.getElementById('login-form');
        const registerForm = document.getElementById('register-form');
        const switchToRegister = document.getElementById('switch-to-register');
        const switchToLogin = document.getElementById('switch-to-login');
        const loginBtn = document.getElementById('login-btn');
        const registerBtn = document.getElementById('register-btn');
        const loginBtnAc = document.getElementById('login-btn-ac');
        const registerBtnAc = document.getElementById('register-btn-ac');
        
        
        // 打开模态框
        function openModal() {
            authModal.classList.remove('hidden');
            document.body.style.overflow = 'hidden'; // 防止背景滚动
            
            // 添加动画效果
            setTimeout(() => {
            authModal.querySelector('div[class*="max-w-md"]').classList.add('scale-100', 'opacity-100');
            authModal.querySelector('div[class*="max-w-md"]').classList.remove('scale-95', 'opacity-0');
            }, 10);
        }
        
        // 关闭模态框
        function closeModalFunc() {
            authModal.querySelector('div[class*="max-w-md"]').classList.remove('scale-100', 'opacity-100');
            authModal.querySelector('div[class*="max-w-md"]').classList.add('scale-95', 'opacity-0');
            
            setTimeout(() => {
            authModal.classList.add('hidden');
            document.body.style.overflow = ''; // 恢复滚动
            }, 300);
        }
        
        // 切换到登录表单
        function showLoginForm() {
            loginForm.classList.remove('hidden');
            registerForm.classList.add('hidden');
            loginTab.classList.add('text-cinnabar', 'border-cinnabar');
            loginTab.classList.remove('text-ink/60');
            registerTab.classList.remove('text-cinnabar', 'border-cinnabar');
            registerTab.classList.add('text-ink/60');
        }
        
        // 切换到注册表单
        function showRegisterForm() {
            registerForm.classList.remove('hidden');
            loginForm.classList.add('hidden');
            registerTab.classList.add('text-cinnabar', 'border-cinnabar');
            registerTab.classList.remove('text-ink/60');
            loginTab.classList.remove('text-cinnabar', 'border-cinnabar');
            loginTab.classList.add('text-ink/60');
        }
        
        // 登录验证
        function validateLogin() {
            const email = document.getElementById('login-email').value;
            const password = document.getElementById('login-password').value;
            
            // 简单验证
            if (!email) {
            showToast('请输入邮箱', true);
            return false;
            }
            
            if (!password) {
            showToast('请输入密码', true);
            return false;
            }
            
            if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
            showToast('请输入有效的邮箱地址', true);
            return false;
            }
            
            return true;
        }
        
        // 注册验证
        function validateRegister() {
            const name = document.getElementById('register-name').value;
            const email = document.getElementById('register-email').value;
            const password = document.getElementById('register-password').value;
            const confirm = document.getElementById('register-confirm').value;
            
            // 简单验证
            if (!name) {
            showToast('请输入用户名', true);
            return false;
            }
            
            if (!email) {
            showToast('请输入邮箱', true);
            return false;
            }
            
            if (!password) {
            showToast('请设置密码', true);
            return false;
            }
            
            if (password.length < 8) {
            showToast('密码长度至少8位', true);
            return false;
            }
            
            if (password !== confirm) {
            showToast('两次输入的密码不一致', true);
            return false;
            }
            
            if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
            showToast('请输入有效的邮箱地址', true);
            return false;
            }
            
            return true;
        }
        
        // 事件监听
        if (loginBtn) loginBtn.addEventListener('click', openModal);
        
        closeModal.addEventListener('click', closeModalFunc);
        modalOverlay.addEventListener('click', closeModalFunc);
        
        loginTab.addEventListener('click', showLoginForm);
        registerTab.addEventListener('click', showRegisterForm);
        
        switchToRegister.addEventListener('click', function(e) {
            e.preventDefault();
            showRegisterForm();
        });
        
        switchToLogin.addEventListener('click', function(e) {
            e.preventDefault();
            showLoginForm();
        });
        
        // 登录提交
        loginBtnAc.addEventListener('click', async function(e) {
            e.preventDefault(); // 阻止表单默认提交行为
            if (validateLogin()) {
                // 构建FormData对象
                const formData = new FormData(loginForm);
                
                try {
                    // 提交登录表单
                    const response = await fetch('index.php?c=main&a=login', {
                        method: 'POST',
                        body: formData // 直接使用FormData，无需设置Content-Type
                    });
                    
                    // 处理响应
                    if (!response.ok) {
                        throw new Error('网络响应异常');
                    }
                    
                    const data = await response.json();
                    
                    if (parseInt(data.code) === 1) {
                        showToast('登录成功！');
                        closeModalFunc();
                        location.reload();
                    } else {
                        showToast('登录失败：' + (data.msg || '未知错误'), true);
                    }
                } catch (error) {
                    console.error('登录请求失败:', error);
                    showToast('登录失败，请稍后重试', true);
                }
            }
        });

        // 注册提交
        registerBtnAc.addEventListener('click', async function(e) {
            e.preventDefault(); // 阻止表单默认提交行为
            if (validateRegister()) {
                // 构建FormData对象
                const formData = new FormData(registerForm);
                
                try {
                    // 提交注册表单
                    const response = await fetch('index.php?c=main&a=register', {
                        method: 'POST',
                        body: formData // 直接使用FormData，无需设置Content-Type
                    });
                    
                    // 处理响应
                    if (!response.ok) {
                        throw new Error('网络响应异常');
                    }
                    
                    const data = await response.json();
                    
                    if (parseInt(data.code) === 1) {
                        showToast('注册成功！请登录');
                        showLoginForm();
                    } else {
                        showToast('注册失败：' + (data.msg || '未知错误'), true);
                    }
                } catch (error) {
                    console.error('注册请求失败:', error);
                    showToast('注册失败，请稍后重试', true);
                }
            }
        });
        
        // 初始化样式
        const modalContent = authModal.querySelector('div[class*="max-w-md"]');
        modalContent.classList.add('scale-95', 'opacity-0', 'transition-all', 'duration-300');
        modalContent.classList.remove('scale-100', 'opacity-100');

        
    });
    // 退出登录功能
    document.getElementById('logout-btn')?.addEventListener('click', async function(e) {
        e.preventDefault();
        
        if (confirm('确定要退出登录吗？')) {
            try {
                const response = await fetch('index.php?c=main&a=logout', {
                    method: 'GET',
                    credentials: 'include' // 确保携带Cookie
                });
                
                const data = await response.json();
                
                if (parseInt(data.code) === 1) {
                    showToast('退出登录成功');
                    // 刷新页面以更新登录状态
                    setTimeout(() => {
                        window.location.href = '/';
                    }, 1000);
                } else {
                    showToast('退出失败：' + (data.msg || '未知错误'), true);
                }
            } catch (error) {
                console.error('退出登录请求失败:', error);
                showToast('退出登录失败，请稍后重试', true);
            }
        }
    });
    
</script>
</body>
</html>